<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>聊天室登录窗口</title>
	<script src="js/vue.min.js"></script>
	<script src="js/axios.min.js"></script>
	<link rel="stylesheet" type="text/css" href="assets/css/login.css" />
</head>

<body>
	<div id="app">
		<div class="row">
			<div class="home-header">
				<h1>简易聊天室</h1>
			</div>
		</div>
		<div class="container">
			<div class="login_panel">
				<div class="img_head_panel">
					<img @click="show_img()" class="img_head" v-bind:src="default_img" alt="点击修改头像" />
					<span class="img_tip">
						点击修改头像
					</span>
					<div v-if="show" class="sel-img">
						<ul>
							<li v-for="(item,index) in img_list" :key="index">
								<img @click="select_img(item.src)" v-bind:src="item.src" />
							</li>
						</ul>
					</div>
				</div>
				<div class="">
					<input id="user" maxlength="10" class="form-control" v-model="username" placeholder="请您输入昵称"
						type="text"><button type="button" @click="login()" v-on:keyup.13="login()"
						class="btn btn-primary">确认</button>
				</div>
			</div>
		</div>
	</div>
	<script>
		new Vue({
			el: '#app',
			data: {
				username: '',
				default_img: "assets/img/users/user-1.jpg",
				img_Num: 5,
				img_list: [],
				show: false
			},
			created() {
				window.addEventListener('keydown', this.KeyUpEnter, true)//开启监听键盘按下事件
			},
			methods: {
				login() {
					console.log(this.username);
					if(this.username==""||this.username==null){
						alert("昵称不能为空！");
						return;
					}

					axios({
						method: 'post',
						url: '/validatelogin',
						data: {
							username: this.username,
							userimg: this.default_img
						}
					})
						.then((res) => {
							if (res.data.code == 200) {
								window.location.href = res.data.url
							} else {
								console.log("后台session:" + res.data.code)
							}
						})
						.catch(function (err) {
							console.log(err);
						})
				},
				show_img() {
					this.show = !this.show
				},
				select_img(e) {
					this.default_img = e

					//关闭表情选择器并将内容赋值到input表签内
					this.show = false;
				},
				KeyUpEnter(e) {
					if (window.event.keyCode === 13) {
						this.login()
					}
				}
			},
			mounted: function () {
				var _this = this;
				for (i = 1; i <= _this.img_Num; i++) {
					var imgs = new Object()
					imgs.id = i;
					imgs.src = "assets/img/users/user-" + i + ".jpg";
					_this.img_list.push(imgs);
				}
			}
		})
	</script>
</body>

</html>